<template>
	<view class="container d-flex flex-column">
		<view class="flex-fill form">
			<list-cell :hover="false">
				<view class="form-input w-100 d-flex align-items-center">
					<view class="label">昵称</view>
					<view class="input flex-fill">
						<input type="text" placeholder="请填写昵称" :disabled="tt1" placeholder-class="text-color-assist font-size-base" 
						v-model="dd[0].UserName">
					</view>
				</view>
			</list-cell>
			<list-cell :hover="false">
				<view class="form-input w-100 d-flex align-items-center">
					<view class="label">手机号码</view>
					<view class="input flex-fill">
						<input  type="text"   v-model="dd[0].Phone" :disabled="tt">
					</view>
				</view>
			</list-cell>
			<list-cell :hover="false">
				<view class="form-input w-100 d-flex align-items-center">
					<view class="label">性别</view>
					<view class="input flex-fill">
						<view class="radio-group" >
							<view  class="radio" v-show="tt2"  :class="{'checked': dd[0].Sex == '1'}" style="margin-right: 10rpx;" @tap="dd[0].Sex=1">先生</view>
							<view class="radio" v-show="tt3" :class="{'checked': dd[0].Sex == '2'}" @tap="dd[0].Sex=2">女士</view>
						</view>
					</view>
				</view>
			</list-cell>
			<list-cell :hover="false" :arrow="!member.birthday">
				<view class="form-input w-100 d-flex align-items-center">
					<view class="label">生日</view>
					<view class="uni-list-cell-db">
										<picker  mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
											<view class="uni-input">{{date}}</view>
										</picker>
									</view>
				
				</view>
			</list-cell>
			<list-cell :hover="false" last>
				<view class="form-input w-100 d-flex align-items-center">
					<view class="label">入会时间</view>
					<view class="input flex-fill">
						<input type="text" v-model="dd2[0].Pdata.substring(0,10)" disabled>
					</view>
				</view>
				
			</list-cell>
		</view>
		<view class="btn-box d-flex align-items-center just-content-center">
			<button type="primary" class="save-btn" @tap="save">{{bj}}</button>
				
		</view>
	</view>
</template>

<script>

	import listCell from '@/components/list-cell/list-cell'
	import api from "@/common/api.js"
	export default {
		components: {
			listCell
		},
		data() {
			
			        const currentDate = this.getDate({
			            format: true
			        })
			//const currentDate = this.getDate({format: true})
			return {
				member: {},
				//date: currentDate,
				dd:[],
				dd1:0,
				dd2:[],
				tt:true,
				tt1:true,
				tt2:false,
				tt3:false,
				dd3:{
					UserID:0,
					UserName:"",
					Phone:"",
					Birthday:"",
					Sex:""
				},
				bj:"编辑",
				 date: currentDate,
			}
		},
	 
	 computed: {
	        startDate() {
				console.log(this.getDate('start'))
	            return this.getDate('start');
	        },
	        endDate() {
				console.log(this.getDate('end'))
	            return this.getDate('end');
	        }
	    },
		onLoad() {
			this.member = this.$store.state.member,
			this.init();
		},
		methods: {
			//bindPickerChange: function(e) {
			         //   console.log('picker发送选择改变，携带值为', e.detail.value)
			          //  this.index = e.detail.value
			       // },
			        bindDateChange: function(e) {
			            this.date = e.detail.value
						console.log(this.date)
			        },
			       // bindTimeChange: function(e) {
			       //     this.time = e.detail.value
			       // },
			        getDate(type) {
			            const date = new Date();
			            let year = date.getFullYear();
			            let month = date.getMonth() + 1;
			            let day = date.getDate();
			
			            if (type === 'start') {
			                year = year - 60;
			            } else if (type === 'end') {
			                year = year + 2;
			            }
			            month = month > 9 ? month : '0' + month;
			            day = day > 9 ? day : '0' + day;
			            return `${year}-${month}-${day}`;
			        },
			    
			 async init(){
				 
				api.userjson().then(res =>{
							 	console.log(res)
					this.dd=res.data
				    this.dd=this.dd.filter(n=>n.UserID==this.member.storeId)
					this.date=this.dd[0].Birthday.substring(0,10)
					if(this.dd[0].Sex=="男"){
						this.dd[0].Sex=1
						this.tt2=true
						this.tt3=false
					}else{
						this.dd[0].Sex=2
						this.tt3=true
						this.tt2=false;
					}
				 console.log(this.dd[0].Sex)
					/*
					this.dd1=Math.max(...this.dd.map(n=>n.UserID))
					.dd=this.dd.filter(n=>n.UserID==this.dd1)
						console.log(this.dd);*/
				}),
				api.pderjson().then(res=>{
					this.dd2=res.data
					this.dd2=this.dd2.filter(n=>n.UserID==1)
					this.dd1=Math.min(...this.dd2.map(n=>n.Dbh))
					this.dd2=this.dd2.filter(n=>n.Dbh==this.dd1)
				})
			},
			save() {
				
				/*const member = Object.assign(this.$store.state.member, this.member)
				this.$store.commit('SET_MEMBER', member)
				uni.navigateBack()*/
				if(this.bj=="编辑"){
					this.tt=false;
					this.tt1=false;
					this.tt2=true;
					this.tt3=true;
					this.bj="完成"
				}else if(this.bj=="完成"){
					this.dd3.UserID=this.dd[0].UserID
					this.dd3.UserName=this.dd[0].UserName
					this.dd3.Phone=this.dd[0].Phone
					this.dd3.Birthday=this.date
					if(this.dd[0].Sex==1){
						this.dd3.Sex="男"
					}else{
						this.dd3.Sex="女"
					}
					
					api.usergaijson(this.dd3).then(res=>{
						if(res.code==1){
							this.tt=true;
							this.tt1=true;
							this.init()
							this.bj="编辑"
							alert("修改成功")
						}else{
							alert("修改失败")
						}
					})
					
				}
			}
			
		}
	}
</script>

<style lang="scss" scoped>
page {
	height: 100%;
}

.container {
	padding: 20rpx 30rpx;
}

.form {
	border-radius: 8rpx;
}

.form-input {
	.label {
		width: 160rpx;
		font-size: $font-size-base;
		color: $text-color-base;
	}
	
	.input {
	}
	
	.radio-group {
		display: flex;
		justify-content: flex-start;
		
		.radio {
			padding: 10rpx 30rpx;
			border-radius: 6rpx;
			border: 2rpx solid $text-color-assist;
			color: $text-color-assist;
			font-size: $font-size-base;
			
			&.checked {
				background-color: $color-primary;
				color: $text-color-white;
				border: 2rpx solid $color-primary;
			}
		}
	}
}

.btn-box {
	height: calc((100vh - 40rpx) / 2);
}

.save-btn {
	width: 90%;
	border-radius: 50rem !important;
	font-size: $font-size-lg;
}
.zz {
  position: relative;
  overflow: visible !important;
}
</style>
